<template>
  <!-- 响应式栅格 xs < 576px; sm >= 576px; md >= 768px; lg >= 992px; xl >=1200 px-->
  <Col :xs="24" :sm="24" :md="24" :lg="17" :xl="17"> 
    <!--轮播图-->
    <my-carousel></my-carousel>
    <!-- content -->
    <div ref="cardList" class="card-list" v-if="isFound">
      <Row :gutter="20">
        <Col :xs="12" :sm="12" :md="8" :lg="8" :xl="8"
          v-for="(item, index) in blogList"
          :key="index" 
        >
          <my-card :listItem="item"></my-card>
        </Col>
      </Row>
    </div>
    <div v-else ref="cardList" class="card-list" >
      <section>
        <Input search enter-button placeholder="搜索关键字..."
          ref="search" 
          v-model.trim="keyWord"
          @on-search="toSearch"
        />
        <p class="search-msg">抱歉，没有符合您查询条件的结果~~</p>
        <p>您可以尝试
          <a @click="$refs.search.focus()">重新搜索</a> 或
          <router-link :to="'/'">返回首页</router-link>
        </p>
      </section>
    </div>
    <!--分页-->
    <Page 
      v-if="totalBlog > pageSize"
      :total="totalBlog" 
      :current="currentPage"
      :page-size="pageSize"
      size="small" 
      show-elevator 
      @on-change="changePage"
    />
  </Col>
</template>

<script>
export default {
  name: "LeftModule",
  data() {
    return {
      keyWord: '',
      isFound: true,
    }
  },
  props: {
    blogList: {
      type: Array,
      default() {
        return []
      }
    },
    totalBlog: Number,
    currentPage: Number,
    pageSize: Number
  },
  methods: {
    changePage(currentPage) {
      this.$emit('changePage', currentPage)
    },
    toSearch() {
      if (this.keyWord !== '') {
        this.$router.push({ name: 'search', params: { keyword: this.keyWord } })
        this.keyWord = ''
      } else {
        this.$refs.search.focus()
      }
    }
  },
  watch: {
    blogList(newValue, oldValue) {
      if (!newValue.length){
        this.isFound = false
      } 
      this.blogList = newValue
      this.$refs.cardList.style['display'] = 'none'
      setTimeout(() => {
        this.$refs.cardList.style['display'] = 'block'
      }, 0)
    }
  },
  components: {
    "my-carousel": () => import("components/homePage/module/MyCarousel"),
    "my-card": () => import("components/homePage/module/Card")
  },
}
</script>

<style lang='scss' scoped>
.card-list {
  padding: 1rem;
  animation: main 0.5s linear;
}
.ivu-page {
  text-align: center;
  padding: 1rem 0 2rem;
}
@media screen and (max-width: 450px) { 
  .ivu-col-span-xs-12 {
    width: 100%;
  }
}
section {
  width: 80%;
  margin: 50px auto 50px;
  p.search-msg {
    margin: 2rem;
    text-align: center;
    font-size: 1.5rem;
  }
  p {
    text-align: center;
  }
}
</style>